<template>
  <div class="dragonTiger">
    <div class="dragonContent">
      <div class="con_left">
        <img src="../../../assets/siteSafety/map1.png" alt="" />
      </div>
      <div class="con_right">
        <div class="imgList">
          <div class="imgBox">
            <div class="itemBox a1">
              <div class="imgTitle">{{disStrict["1区"].region}}：{{disStrict["1区"].area}}m&sup2;</div>
              <div class="list">
                <div class="imgleft">
                  <div class="smallTitle">{{disStrict["1区"].fenbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['1区'].fenbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt=""/>
                  </div>
                  <div class="personName">{{disStrict["1区"].fenbao.name}}</div>
                  <div class="personTel">{{disStrict["1区"].fenbao.phone}}</div>
                </div>
                <div class="imgright">
                  <div class="smallTitle">{{disStrict["1区"].zongbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['1区'].zongbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt=""/>
                  </div>
                  <div class="personName">{{disStrict["1区"].zongbao.name}}</div>
                  <div class="personTel">{{disStrict["1区"].zongbao.phone}}</div>
                </div>
              </div>
            </div>
            <div class="itemBox b1">
              <div class="imgTitle">{{disStrict["2区"].region}}：{{disStrict["2区"].area}}m&sup2;</div>
              <div class="list">
                <div class="imgleft">
                  <div class="smallTitle">{{disStrict["2区"].fenbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['2区'].fenbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt="">
                  </div>
                  <div class="personName">{{disStrict["2区"].fenbao.name}}</div>
                  <div class="personTel">{{disStrict["2区"].fenbao.phone}}</div>
                </div>
                <div class="imgright">
                  <div class="smallTitle">{{disStrict["2区"].zongbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['2区'].zongbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt="">
                  </div>
                  <div class="personName">{{disStrict["2区"].zongbao.name}}</div>
                  <div class="personTel">{{disStrict["2区"].zongbao.phone}}</div>
                </div>
              </div>
            </div>
            <div class="itemBox c1">
              <div class="imgTitle">{{disStrict["3区"].region}}：{{disStrict["3区"].area}}m&sup2;</div>
              <div class="list">
                <div class="imgleft">
                  <div class="smallTitle">{{disStrict["3区"].fenbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['3区'].fenbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt="">
                  </div>
                  <div class="personName">{{disStrict["3区"].fenbao.name}}</div>
                  <div class="personTel">{{disStrict["3区"].fenbao.phone}}</div>
                </div>
                <div class="imgright">
                  <div class="smallTitle">{{disStrict["3区"].zongbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['3区'].zongbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt="">
                  </div>
                  <div class="personName">{{disStrict["3区"].zongbao.name}}</div>
                  <div class="personTel">{{disStrict["3区"].zongbao.phone}}</div>
                </div>
              </div>
            </div>
            <div class="itemBox d1">
              <div class="imgTitle">{{disStrict["4区"].region}}：{{disStrict["4区"].area}}m&sup2;</div>
              <div class="list">
                <div class="imgleft">
                  <div class="smallTitle">{{disStrict["4区"].fenbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['4区'].fenbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt="">
                  </div>
                  <div class="personName">{{disStrict["4区"].fenbao.name}}</div>
                  <div class="personTel">{{disStrict["4区"].fenbao.phone}}</div>
                </div>
                <div class="imgright">
                  <div class="smallTitle">{{disStrict["4区"].zongbao.position}}</div>
                  <div class="imgwall">
                    <!-- <img :src="disStrict['4区'].zongbao.headImage" alt=""> -->
                    <img src="http://csces.oss-accelerate.aliyuncs.com/585506h1656332083913913.jpg" alt="">
                  </div>
                  <div class="personName">{{disStrict["4区"].zongbao.name}}</div>
                  <div class="personTel">{{disStrict["4区"].zongbao.phone}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="imgBtm">
            <span class="bigTitle">
              提升安全文明施工意识，落实分区责任、健全现场组织、做好施工过程管控、及时排查隐患、完善管理体系。做到质量问题，绝不姑息。
              </span
            >
            <div class="bitom">
              <img
              src="../../../assets/siteSafety/title.png"
              alt=""
              width="40px"
            />
            <span class="label">团队承诺</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive } from 'vue'
import { getData } from '../../../api/softManage'
import {message} from 'ant-design-vue'
const disStrict = reactive({
  "1区":{
    id: '',
    region: "1区",
    area: "900",
    fenbao:{
      position: "管理员1",
      headImage: "",
      name: "李四1",
      phone: "13578945612"
    },
    zongbao:{
      position: "管理员1",
      headImage: "",
      name: "李四2",
      phone: "13578945612"
    },
  },
  "2区":{
    id: '',
    region: "2区",
    area: "915",
    fenbao:{
      position: "管理员2",
      headImage: "",
      name: "张三",
      phone: "13578945612"
    },
    zongbao:{
      position: "管理员2",
      headImage: "",
      name: "李四2",
      phone: "13578945612"
    },
  },
  "3区":{
    id: '',
    region: "3区",
    area: "900",
    fenbao:{
      position: "管理员3",
      headImage: "",
      name: "李四1",
      phone: "13578945612"
    },
    zongbao:{
      position: "管理员3",
      headImage: "",
      name: "李四2",
      phone: "13578945612"
    },
  },
  "4区":{
    id: '',
    region: "4区",
    area: "900",
    fenbao:{
      position: "管理员4",
      headImage: "",
      name: "李四1",
      phone: "13578945612"
    },
    zongbao:{
      position: "管理员4",
      headImage: "",
      name: "李四2",
      phone: "13578945612"
    },
  },
})
const getImage = async () => {
  const res = await getData('/t-responsibility-info/getAll', { type: 2 })
  const { code, message, result} = res
  if(code === 200){
    // 一区的数据
    disStrict["1区"] = result.find(i=>i.region == '1区')
     disStrict["2区"] = result.find(i=>i.region == '2区')
    disStrict["3区"] = result.find(i=>i.region == '3区')
    disStrict["4区"] = result.find(i=>i.region == '4区')
  }else{
    message.error(message)
  }
}
onMounted(()=>{
  // getImage()
})
</script>
<style lang="less" scoped>
.dragonTiger {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #08476670;
  padding: 10px;
  .dragonContent {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px dashed rgb(98, 235, 249);
    border-radius: 30px;
    display: flex;
    .con_left {
      width: 43%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .con_right {
      width: 57%;
      height: 100%;
      padding: 10px;
      .imgList {
        height: 100%;
        width: 100%;
        // background: red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .imgBtm {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .bitom{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 210px;
          }
          .bigTitle {
            // font-size: 34px;
            font-weight: 600;
            color: yellow;
          }
          .label{
            color:red;
            font-size: 18px;
            font-weight: 600;
          }
        }
        .imgBox {
          flex-grow: 1;
          display: flex;
          justify-content: space-between;
          align-content: space-around;
          flex-wrap: wrap;
          .itemBox {
            width: 45%;
            height: 45%;
            background: red;
            background-position: 100% 100%;
            position: relative;
            .imgTitle{
              box-sizing: border-box;
              font-size: 20px;
              color: white;
              text-align: center;
              height: 40px;
              line-height: 40px
            }
            .list{
              position: absolute;
              bottom: 0;
              // background: red;
              display: flex;
              height: calc(~"100% - 40px");
              justify-content: space-between;
              .imgleft,.imgright{
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                 align-items: center;
                text-align: center;
                padding: 0 5px;
               
                
                .smallTitle{
justify-self: flex-start;
                }
                .smallTitle,.personName{
                  font-size: 12px;
                }
                .personTel{
                  font-size: 10px;
                }
                .personName,.personTel{
                  justify-self: flex-end;
                }
                .imgwall{
                  width: calc(~"100% - 10px");
                  height: 58%;
                  overflow: hidden;
                  // margin-left: 5px;
                  img{
                    display: block;
                    max-width: 100%;
                    height:auto
                  }
                }
              }
            }
          }
          .a1 {
            background: url("../../../assets/siteSafety/user/1A.png") no-repeat;
            background-size: 100% 100%;
          }
          .b1 {
            background: url("../../../assets/siteSafety/user/2B.png") no-repeat;
            background-size: 100% 100%;
          }
          .c1 {
            background: url("../../../assets/siteSafety/user/3C.png") no-repeat;
            background-size: 100% 100%;
          }
          .d1 {
            background: url("../../../assets/siteSafety/user/4D.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>